<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
  <title>个人信息</title>

<style>
  body {
    font-family: Arial, sans-serif;
    background-color: #e6f7ff; /* 设置浅蓝色背景颜色 */
    background-image: url("../images/login.jpg"); /* 设置背景图片路径，替换为你实际的图片路径 */
    background-size: cover; /* 让背景图片覆盖整个页面 */
    background-repeat: no-repeat; /* 不重复显示背景图片 */
    background-attachment: fixed; /* 固定背景图片，使其不随页面滚动而滚动 */
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  /* 标题 h1 样式 */
  h1 {
    color: #333;
    text-align: center;
    margin-top: 50px;
  }

  /* 段落 p 样式，用于显示用户信息 */
  p {
    background-color: rgba(255, 255, 255, 0.8); /* 白色半透明背景，使其与背景图融合更好 */
    padding: 15px;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    width: 300px;
    margin: 15px 0;
    text-align: center;
  }

  /* 链接 a 样式，用于修改手机号码和修改密码的链接 */
  a {
    text-decoration: none;
    color: white;
    background-color: #007BFF;
    padding: 10px 20px;
    border-radius: 5px;
    transition: background-color 0.3s ease;
  }

  a:hover {
    background-color: #0056b3;
  }

</style>
</head>
<body>
<div class="p">
<h1>个人信息</h1>
<p>用户名: ${user.username}</p>
<p>手机号: ${user.phoneNumber}</p>
<p>角色: ${user.role}</p>
</div>
<div class="a">
<a href="/user/updatePhone">修改手机号码</a>
<a href="/user/updatePassword">修改密码</a>
</div>
</body>

</html>